<template>
    <div>
        <el-dialog :title="isAdd ? '添加角色' : '修改角色'" :model-value="isShow" center :before-close="handleClose">
            <el-form :model="roleInfo" :rules="rules" label-width="100px" class="demo-ruleForm" ref="ruleFormRef">
                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="roleInfo.rolename"></el-input>
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-tree check-strictly :data="menuData" show-checkbox node-key="id" :props="defaultProps" default-expand-all
                        ref="tree">
                    </el-tree>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="roleInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="offCheck(ruleFormRef)">取 消</el-button>
                    <el-button type="primary" @click="addMenu(ruleFormRef, isAdd)">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
// 引入接口地址
import { roleAdd, roleEdit, roleLook } from "../../request/api"
import { reactive, ref, defineEmits, defineExpose, computed } from "vue"
//引入了数据类型规则
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useStore } from "vuex"
let store = useStore()
// 接受父组件的参数
defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
const roleInfo = ref({
    rolename: "",
    menus: "",
    status: 1
})
const defaultProps = {
    children: 'children',
    label: 'title'
}
//创建一个ref
const ruleFormRef = ref<FormInstance>();
const tree = ref();
const rules = reactive<FormRules>({
    rolename: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
    ]
})
//去定义 子父组件通信方法 创建自定义事件名称
let emit = defineEmits(["offCheck"])
//点击取消
const offCheck = (formEl: FormInstance | undefined) => {
    // 点击重置
    if (!formEl) return
    formEl.resetFields()
    // 子传父
    emit("offCheck", false)
    roleInfo.value = {
        rolename: "",
        menus: "",
        status: 1
    }
    // 清空选择框
    tree.value.setCheckedKeys([])
}
// 点击确定
const addMenu = async (formEl: FormInstance | undefined, isAdd: boolean) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            roleInfo.value = {
                ...roleInfo.value,
                menus: tree.value.getCheckedKeys().join(",") || ""
            }
            if (isAdd) {
                //调用添加接口
                roleAdd(roleInfo.value).then((res: any) => {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                    offCheck(ruleFormRef.value)
                    store.dispatch("role/roleList_Action")
                })
            } else {
                // 调用编辑接口
                roleEdit(roleInfo.value).then((res: any) => {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                    offCheck(ruleFormRef.value)
                    store.dispatch("role/roleList_Action")
                })
            }
        }
    });
};
// 编辑数据回显
const lookUp = (id: number) => {
    roleLook({ id }).then((res: any) => {
        roleInfo.value = { ...res.data.list, id }
        tree.value.setCheckedKeys(
            res.data.list.menus.split(",") || []
        )
    })
}
defineExpose({
    lookUp
})
// 点击X关闭
const handleClose = (done: () => void) => {
    done()
    offCheck(ruleFormRef.value)
}
// 获取到菜单列表
const menuData = computed(() =>
    store.getters["menu/getMenu"]
)
store.dispatch("menu/changeMenuAction")
</script>

<style scoped>
</style>
